document.addEventListener('DOMContentLoaded', function() {
    const uploadForm = document.getElementById('upload-form');
    const trainingForm = document.getElementById('training-form');
    const progressBar = document.querySelector('.progress-bar');
    const trainingStatus = document.getElementById('training-status');
    const trainingProgress = document.getElementById('training-progress');
    const trainingResult = document.getElementById('training-result');
    const accuracySpan = document.getElementById('accuracy');

    // 处理文件上传
    uploadForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData();
        const fileInput = document.getElementById('file');
        formData.append('file', fileInput.files[0]);

        try {
            const response = await fetch('/training/upload', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            if (result.status === 'success') {
                alert('文件上传成功');
                location.reload();
            } else {
                alert('上传失败: ' + result.message);
            }
        } catch (error) {
            alert('上传失败: ' + error.message);
        }
    });

    // 处理模型训练
    trainingForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        const dataset = document.getElementById('dataset').value;
        const targetColumn = document.getElementById('target-column').value;
        const epochs = document.getElementById('epochs').value;

        trainingProgress.style.display = 'block';
        trainingResult.style.display = 'none';
        let currentEpoch = 0;

        try {
            const response = await fetch('/training/train', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    dataset: dataset,
                    target_column: targetColumn,
                    epochs: epochs
                })
            });

            const result = await response.json();
            if (result.status === 'success') {
                // 显示训练结果
                accuracySpan.textContent = result.accuracy.toFixed(2) + '%';
                trainingResult.style.display = 'block';
                
                // 绘制训练历史图表
                const trace = {
                    x: result.history.map(h => h.epoch),
                    y: result.history.map(h => h.accuracy),
                    mode: 'lines+markers',
                    name: '准确率'
                };

                const layout = {
                    title: '训练历史',
                    xaxis: {title: '轮次'},
                    yaxis: {title: '准确率 (%)'}
                };

                Plotly.newPlot('training-chart', [trace], layout);
            } else {
                alert('训练失败: ' + result.message);
            }
        } catch (error) {
            alert('训练失败: ' + error.message);
        } finally {
            trainingProgress.style.display = 'none';
        }
    });
}); 